<template>
    <div class="uploadPhoto">
        <div class="moduleHead">
            <span class="center">
            <span class="back" @click="$router.go(-1)"></span>
            <span>Add Photo</span>
            </span>
        </div>
        <div class="body">
            <div v-show='success' class="msgSuccess">Photo uploaded! Keep uploading other photos!</div>
            <div class="uploadOne">
                <input accept="image/*" type="file" @change='selectPhoto' />
                <img v-if="uploadImg" class="img" :src="uploadImg" />
                <!-- bg can't not use camera direction-->
            </div>
            <div class="uploadTwo">
                <!--<input accept="image/*" type="file" @change='selectPhoto' />-->
                <div class="btn" @click='uploadPhoto' :class="btnClass">
                    <loading :props="{show:loading,type:'btn'}"></loading>
                    {{text}}
                </div>
            </div>
            <div class="note">{{language.uploadPhoto_note}}</div>
        </div>
        <publicDialog :props="this.dialogData"></publicDialog>
    </div>
</template>
<script>
import publicDialog from './PublicDialog'
import loading from './Loading'

export default {

    name: 'uploadPhoto',

    components: {
        publicDialog,
        loading,
    },

    data: function() {
        return {
            text: 'Choose a photo', //Upload a photo
            uploadImg: '',
            file: '',
            width: 0,
            height: 0,
            success: false,
            btn: false,
            loading: false,
            dialogData: {}
        }
    },

    created() {
        //console.log(this.$route.query);
    },

    activated() {
        this.success = false;
        this.btn = false;
        this.uploadImg = '';
        this.file = '';
        this.width = 0;
        this.height = 0;
        this.text = 'Choose a photo';
        this.dialogData = {};
        this.loading = false;
    },

    computed: {

        btnClass: function() {
            var activeClass;
            if (this.btn) {
                activeClass = 'btnOK'
            } else {
                activeClass = 'btnFail'
            }
            return activeClass;
        },

        userInfo() {
            return this.$store.state.user.userInfo;
        },
    },

    methods: {

        selectPhoto(e) {
            console.log(e, e.target.files[0]);
            let tthis = this,
                reader = new FileReader();
            if (e.target.files[0]) {
                this.file = e.target.files[0];
                e.target.value = ''; //clear file
                reader.readAsDataURL(this.file);
                reader.onload = function(e) {
                    tthis.uploadImg = this.result;
                    tthis.text = 'Upload a photo';
                    tthis.btn = true;
                    //get width&height
                    let img = new Image();
                    img.src = tthis.uploadImg;
                    img.onload = function() {
                        tthis.width = img.naturalWidth;
                        tthis.height = img.naturalHeight;
                    };

                }
            }
        },

        checkUpload: function() {

            let bool = true,
                arrImg = [],
                size = 26,
                photoType = this.$route.query.type;

            if (photoType == 'public') {
                arrImg = this.userInfo.pictures
            } else if (photoType == 'private') {
                arrImg = this.userInfo.private_pictures;
            } else if (photoType == 'luxuries') {
                arrImg = this.userInfo.luxuries_pictures
            }

            if (this.file == '') {
                this.dialogData = {
                    position: 'top',
                    type: 'error',
                    content: {
                        info: this.language.uploadPhoto_note_selectPhoto,
                    }
                };
                bool = false;
            } else if (this.file.size >= 10280000) {
                this.dialogData = {
                    position: 'top',
                    type: 'error',
                    content: {
                        info: this.language.uploadPhoto_note_maxSize
                    }
                };
                bool = false;
            } else if (this.width < 144 || this.height < 144) {
                this.dialogData = {
                    position: 'top',
                    type: 'error',
                    content: {
                        info: this.language.uploadPhoto_note_minSize
                    }
                };
                bool = false;
            } else if (arrImg.length >= size) {
                this.dialogData = {
                    position: 'top',
                    type: 'error',
                    content: {
                        info: this.repalceStr(this.language.uploadPhoto_note_maxPhoto, [size])
                    }
                };
                bool = false;
            }
            return bool;
        },

        uploadPhoto() {
            if (!this.checkUpload() || this.loading) { return };

            let tthis = this,
                obj = {},
                data = new FormData(),
                photoType = this.$route.query.type;

            this.loading = true;
            data.append("file", this.file);
            data.append("album_type", photoType == 'private' ? 11 : -1);
            obj.data = data;
            obj.photoType = photoType;
            obj.callback = function(response) {
                console.log('callback', response);
                tthis.loading = false;
                if (response.status_code == 0) {
                    tthis.uploadImg = '';
                    tthis.file = '';
                    tthis.width = 0;
                    tthis.height = 0;
                    tthis.success = true;
                    tthis.btn = false;
                } else if (response.status_code == 5) {
                    console.log(response.msg);
                    tthis.dialogData = {
                        position: 'top',
                        type: 'error',
                        content: {
                            info: response.msg,
                        }
                    };
                }
            };
            this.$store.dispatch('user_uploadPhoto', obj);
        }
    }
}

</script>
<style scoped>
.uploadPhoto {
    background: #fff;
    padding-top: 44px;
}

.uploadPhoto .body {
    padding-bottom: 50px;
}

.uploadPhoto .msgSuccess {
    padding: 20px 10px 0 10px;
    text-align: center;
    font-size: 13px;
}

.uploadPhoto .uploadOne {
    margin: 40px auto auto auto;
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px dashed #cccccc;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 31px auto;
    background-image: url(../assets/ico_add.png);
}

.uploadPhoto .uploadOne input[type=file] {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.uploadPhoto .uploadOne .img {
    position: absolute;
    z-index: 1;
    width: 102px;
    height: 102px;
    left: -1px;
    top: -1px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.uploadPhoto .uploadTwo {
    margin: 40px 10px 0 10px;
    position: relative;
}

.uploadPhoto .uploadTwo input[type=file] {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.uploadPhoto .note {
    margin: 10px 10px 0 10px;
    font-size: 12px;
    line-height: 16px;
    color: #888888;
}

.uploadPhoto .btnFail {
    opacity: .6;
}

</style>
